<template>
	<view class="container">
		<view class="type">
			<view class="title">
				<text>
					{{
						Number(selectOpeningType) ? '金牌陪宠师' : '普通陪宠师'
					}}
				</text>
				<view @click="openingTypeShow">
					<text>切换</text>
					<uni-icons
						type="forward"
						:color="'#5C5E5E'"
						:size="16"
					></uni-icons>
				</view>
			</view>
			<view v-if="selectOpeningType" class="content">
				需缴纳
				<text>{{ deposit }}元</text>
				保证金（可在注销陪宠师后退 还），在线开通后可获得更多接单机会
			</view>
			<view v-else class="content">
				免费开通，在线认证通过后即可开始接单
			</view>
		</view>
		<view class="verification">
			<view class="title">身份信息验证</view>
			<view class="explain">
				请输入您真实姓名和身份证号，身份信息仅用于实人认证，不做它用、请放心填写
			</view>
			<view class="name">
				<text>真实姓名</text>
				<input
					type="text"
					v-model="realName"
					placeholder="输入真实姓名"
					placeholder-class="placeholder"
				/>
			</view>
			<view class="name idNumber">
				<text>身份证号</text>
				<input
					type="text"
					v-model="idCard"
					placeholder="输入身份证号"
					placeholder-class="placeholder"
				/>
			</view>
		</view>
		<!-- #ifdef MP-TOUTIAO -->
		<view
			class="btn"
			:class="isNextStep ? '' : 'isNextStep'"
			@click="toNextStep"
		>
			下一步人脸认证
		</view>
		<uni-popup
			ref="popup"
			safeArea
			backgroundColor="#fff"
			border-radius="12px"
		>
			<view class="popupModel">
				<view class="popup_title">认证说明</view>
				<view class="popup_content">
					为确保当前操作为本人，我们将对您进行人脸识别用于验证身份的真实性
					点击【同意认证】则表示本人同意我们根据以上方式，使用和收集您的身份资料用于实人认证。
				</view>
				<view class="popup_btn">
					<view @click="close">暂不认证</view>
					<view @click="agreeToAuthentication">同意认证</view>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
		<!-- #ifndef MP-TOUTIAO -->
		<view
			class="btn"
			:class="isNextStep ? '' : 'isNextStep'"
			@click="toNextStep"
		>
			确定
		</view>
		<!-- #endif -->
		<uni-popup ref="openingType" safeArea backgroundColor="#fff">
			<view class="openingType">
				<view class="title">
					<text>选择开通的类型</text>
					<uni-icons
						@click="close"
						type="closeempty"
						:color="'#1B2120'"
						:size="20"
					></uni-icons>
				</view>
				<view class="list">
					<view
						class="item"
						v-for="(item, index) in openingTypeArr"
						:key="index"
						@click="selectLei(item)"
					>
						<view class="item_title">
							<text>{{ item.name }}</text>
							<image
								:src="
									url +
									(item.show ? 'icon-13.png' : 'icon-12.png')
								"
								mode=""
							></image>
						</view>
						<view class="item_content">
							{{ item.id ? `需缴纳保证金` : '' }}
							<text v-if="item.id">{{ deposit }}元</text>
							{{ item.id ? `保证金` : '' }}{{ item.introduce }}
						</view>
					</view>
				</view>
				<view class="btn" @click="changOpeningType">
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import config from '@/config/index.ts'
import api from '@/api'
const url = ref<string>(
	'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/'
)
const realName = ref<string>('') //姓名
const idCard = ref<string>('') //身份证号
const isNextStep = ref<Boolean>(false) //是否可以点击进行下一步

const deposit = ref<string>('0') //金牌陪宠师价格
const selectOpeningType = ref<number>(0) //类型选择
onLoad((e) => {
	deposit.value = e.deposit
	selectOpeningType.value = Number(e.select)
	openingTypeArr.value[e.select].show = true
})

const openingType = ref(null) //更换类型弹框
const openingTypeArr = ref([
	{
		name: '普通陪宠师',
		id: 0,
		introduce: '免费开通，在线认证通过后即可开始接单',
		show: false
	},
	{
		name: '金牌陪宠师',
		id: 1,
		introduce:
			'保证金（可在注销陪宠师后退还），在线开通后可获得更多接单机会',
		show: false
	}
])

//弹框显示
const openingTypeShow = () => {
	openingType.value.open('bottom')
}
//选择开通类型
const selectLei = (i) => {
	if (i.show) return
	openingTypeArr.value.forEach((item) => {
		item.show = item.id == i.id ? true : false
	})
}
//确定选择更换开通类型
const changOpeningType = () => {
	openingTypeArr.value.forEach((item) => {
		if (item.show) {
			selectOpeningType.value = item.id
		}
	})
	openingType.value.close()
}

const popup = ref(null) //认证说明弹框
//选择开通类型弹框隐藏
const close = () => {
	popup.value.close()
}
//点击下一步
const toNextStep = () => {
	if (!isNextStep.value) return
	// #ifdef MP-TOUTIAO
	popup.value.open('center')
	// #endif
	// #ifndef MP-TOUTIAO
	submit()
	// #endif
}
//微信认证
const submit =  async() => {
	const res2: any = await api({
		method: 'post',
		url: `/mall/user/nameAuthenticate/wx`,
		data: {
			realName: realName.value,
			idCard: idCard.value,
		}
	})
	if (res2) {
		uni.showToast({
			title: res2.data ? '实名认证成功' : '识别失败，请检查',
			icon: 'none'
		})
		if (res2.data) {
			let url =
				selectOpeningType.value == 1 && Number(deposit.value)
					? 'payment/payment'
					: 'openStudio/openStudio'
			uni.hideLoading()
			uni.redirectTo({
				url:
					`/pages/applyLookAfterPet/${url}?deposit=` +
					deposit.value +
					'&selectOpeningType=' +
					selectOpeningType.value
			})
		}
	}
}
//同意认证
const agreeToAuthentication = () => {
	const detail: any = {
		realName: realName.value,
		idCard: idCard.value,
		selectOpeningType: selectOpeningType.value,
		deposit: deposit.value
	}
	close()
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['camera'], //从相册选择
		success: (res) => {
			let imgFile = res.tempFilePaths[0]
			uni.uploadFile({
				url: config.api + '/api/mall/user/uploadFacePic',
				filePath: imgFile,
				name: 'file',
				header: {
					'x-flow-id': new Date().getTime()
				},
				formData: {
					user: 'test'
				},
				success: async (uploadFileRes) => {
					uni.showLoading({
						mask: true,
						title: '实名认证中~'
					})
					const res2: any = await api({
						method: 'post',
						url: `/mall/user/nameAuthenticate`,
						data: {
							realName: detail.realName,
							idCard: detail.idCard,
							facialPictureUrl: JSON.parse(uploadFileRes.data)
								.data
						}
					})
					if (res2) {
						uni.showToast({
							title: res2.data
								? '实名认证成功'
								: '识别失败，请检查',
							icon: 'none'
						})
						if (res2.data) {
							let url =
								selectOpeningType.value == 1 &&
								Number(deposit.value)
									? 'payment/payment'
									: 'openStudio/openStudio'
							uni.hideLoading()
							uni.redirectTo({
								url:
									`/pages/applyLookAfterPet/${url}?deposit=` +
									deposit.value +
									'&selectOpeningType=' +
									selectOpeningType.value
							})
						}
					}
				}
			})
		}
	})
}

// 去空格
const trimAll = (ele: string) => {
	return ele.split(/[\t\r\f\n\s]*/g).join('')
}
watch([realName, idCard], (newVal) => {
	realName.value = trimAll(newVal[0])
	idCard.value = trimAll(newVal[1])
	isNextStep.value = realName.value && idCard.value ? true : false
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	padding: 32rpx;
	line-height: 1;
	box-sizing: border-box;
	background-color: #f9f6f6;
}

.type {
	padding: 48rpx 32rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-sizing: border-box;

	.title {
		color: #1b2120;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 32rpx;
		@include flex(center, space-between);

		view {
			color: #5c5e5e;
			font-size: 26rpx;
			font-weight: normal;
			@include flex(center);

			text {
				margin-right: 4rpx;
			}
		}
	}

	.content {
		color: #5c5e5e;
		font-size: 30rpx;
		line-height: 42rpx;

		text {
			color: #ff6084;
		}
	}
}

.verification {
	margin: 32rpx 0;
	padding: 64rpx 32rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-sizing: border-box;

	.title {
		color: #1b2120;
		font-size: 32rpx;
		font-weight: bold;
	}

	.explain {
		color: #7c807f;
		font-size: 26rpx;
		line-height: 40rpx;
		margin: 24rpx 0 96rpx;
	}

	.name {
		width: 100%;
		padding-bottom: 24rpx;
		@include flex(center);
		border-bottom: 2rpx solid #e4e6e6;

		text {
			width: 160rpx;
			color: #1b2120;
			font-size: 30rpx;
			margin-right: 72rpx;
		}

		input {
			width: calc(100% - 160rpx);
			color: #1b2120;
			font-size: 30rpx;
			font-weight: bold;
			border: none;
		}

		.placeholder {
			color: #cacccc;
			font-size: 30rpx;
		}
	}

	.idNumber {
		margin-top: 72rpx;
	}
}

.btn {
	width: 100%;
	height: 88rpx;
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 62rpx;
	@include flex(center, center);
	background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
}

.isNextStep {
	background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
}

.openingType {
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	padding: 60rpx 0 4rpx;
	border-radius: 24rpx 24rpx 0 0;

	.title {
		width: 100%;
		color: #1b2120;
		font-size: 40rpx;
		font-weight: bold;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 52rpx;
		@include flex(center, space-between);
	}

	.list {
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 240rpx;

		.item {
			width: 100%;
			border-radius: 24rpx;
			padding: 48rpx 32rpx;
			box-sizing: border-box;
			border: 2rpx solid #e4e6e6;

			.item_title {
				color: #1b2120;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 32rpx;
				@include flex(center, space-between);

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item_content {
				color: #5c5e5e;
				font-size: 30rpx;
				line-height: 42rpx;

				text {
					color: #ff6084;
				}
			}

			&:last-child {
				margin-top: 26rpx;
			}
		}
	}

	.btn {
		width: 100vw;
		padding: 8rpx 32rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding-bottom: var(--safe-area-bottom);

		view {
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
			color: #ffffff;
			border-radius: 62rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			@include flex(center, center);
		}
	}
}

.popupModel {
	width: 622rpx;
	padding: 64rpx 40rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-sizing: border-box;

	.popup_title {
		color: #1b2120;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 48rpx;
	}

	.popup_content {
		color: #1b2120;
		font-size: 30rpx;
		padding: 0 24rpx;
		line-height: 54rpx;
		margin-bottom: 48rpx;
	}

	.popup_btn {
		@include flex(center, space-between);

		view {
			width: 264rpx;
			height: 88rpx;
			color: #ff6084;
			font-size: 28rpx;
			border-radius: 44rpx;
			border: 2rpx solid #ff6084;
			@include flex(center, center);

			&:last-child {
				color: #ffffff;
				background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			}
		}
	}
}
</style>
